<swal title="Delete?"
      [text]="'Selected secret will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<form class="needs-validation"
      *ngIf="apiResource"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="form-group row">
        <label for="client-secret-type"
               class="col-sm-2 col-form-label">
            Type (*)
        </label>
        <div class="col-sm-10">
            <select class="form-control custom-select"
                    id="client-secret-type"
                    name="client-secret-type"
                    [ngClass]="{ 'invalid': form.submitted && secret.invalid }"
                    [(ngModel)]="apiSecret.type"
                    required
                    #secret="ngModel">
                <option value="SharedSecret">Shared Secret</option>
                <option value="X509Thumbprint">X509 Thumbprint</option>
            </select>
            <div *ngIf="form.submitted && secret.invalid"
                 class="form-control-feedback text-danger">
                Field 'Type' is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="client-secret-value"
               class="col-sm-2 col-form-label">
            Value (*)
        </label>
        <div class="col-sm-10">
            <div class="input-group">
                <span *ngIf="apiSecret.type === 'SharedSecret'"
                      class="input-group-prepend cursor-pointer"
                      title="Generate a random value."
                      (click)="generateValue()">
                    <span class="input-group-text">
                        <i class="material-icons align-middle font-12">add</i>
                    </span>
                </span>
                <input class="form-control"
                       type="text"
                       id="client-secret-value"
                       name="client-secret-value"
                       [ngClass]="{ 'invalid': form.submitted && value.invalid }"
                       [(ngModel)]="apiSecret.value"
                       required
                       maxlength="4000"
                       #value="ngModel" />
            </div>
            <div class="text-muted">* You will not be able to access the value after adding it.</div>
            <div *ngIf="form.submitted && value.invalid"
                 class="form-control-feedback text-danger">
                Field 'Value' is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="expiration-date"
               class="col-sm-2 col-form-label">
            Expiration Date
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="expiration-date"
                   name="expiration-date"
                   placeholder="mm-dd-yyyy"
                   [(ngModel)]="apiSecret.expiration"
                   (focus)="datePicker.toggle()"
                   ngbDatepicker
                   #datePicker="ngbDatepicker" />
        </div>
    </div>
    <div class="form-group row">
        <label for="description"
               class="col-sm-2 col-form-label">
            Description
        </label>
        <div class="col-sm-10">
            <textarea class="form-control"
                      rows="3"
                      type="text"
                      id="description"
                      name="description"
                      [(ngModel)]="apiSecret.description"
                      maxlength="2000"
                      #description="ngModel">
        </textarea>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5">
                Add
            </button>
        </div>
    </div>
</form>
<hr />
<div class="mt-3 mb-3">
    <div class="col-12">
        <app-list-view [clientSide]="true"
                       [rowsPerPage]="10"
                       [canFilter]="false"
                       [columns]="columns"
                       [rows]="rows"
                       [defaultSortDirection]="'Asc'"
                       #apiSecretsList>
        </app-list-view>
    </div>
    <ng-template let-row="row"
                 let-value="value"
                 #actionsTemplate>
        <button class="btn btn-danger"
                role="button"
                (click)="showDeleteAlert(value)">
            Remove
        </button>
    </ng-template>
    <ng-template let-row="row"
                 let-value="value"
                 #optionalTemplate>
        <span *ngIf="value">{{ value }}</span>
        <span *ngIf="!value"> - </span>
    </ng-template>
</div>
<hr />